<!-- 装备 锻造与强化 -->
<template>
    <el-card v-for="column in columns" style="margin-bottom: 20px;">
      <!-- 标题栏 -->
      <template #header>
        <div class="card-header">
          <span>{{ column.name }}</span>
        </div>
      </template>
      <!-- 表单栏 -->
      <el-form :model="equipment">
        <el-form-item  
        v-for="prop in column.properties" 
          :key="prop.field" 
          :label="prop.label"
          :style="prop.type === 'textarea' ? { display: 'block' } : {}"
        >
         <!-- 数字输入框 -->
          <el-input-number
            v-if="prop.type === 'number'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            controls-position="right"
            style="width: 100%"
          />
         <!-- 装备类型下拉框 -->
          <el-select
            v-else-if="prop.field === 'type'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请选择装备类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in equipTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 布尔值选择框 -->
          <el-switch
            v-else-if="prop.type === 'boolean'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
          />
           <!-- 长文本输入框 -->
          <el-input
            v-else-if="prop.type === 'textarea'"
            v-model="equipment[prop.field]"
            type="textarea"
            :disabled="props.openType === 'preview'"
            :rows="3"
            placeholder="请输入内容"
            style="width: 100%;"
          />
          <!-- 字符串输入框 -->
          <el-input
            v-else
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElTree } from 'element-plus';
import {ajax } from '@/api';
import { ElMessage } from 'element-plus';
import { number } from 'echarts';
import type { EquipTpl } from '@/pojo/equip-tpl';
const props = defineProps<{
  equipment?: EquipTpl; // 必须符合 Equipment 类型、
  openType: string; // 打开方式 add/edit/preview
}>();

// 装备类型选项
const equipTypeOptions = ref([
  { value: 1, label: '武器' },
  { value: 2, label: '鞋子' },
  { value: 3, label: '帽子' },
  { value: 4, label: '衣服' }
]);

let columns = ref([
  {
    name: '宝石系统',
    properties: [
      { field: 'gemSocketsInit', label: '初始宝石孔数量', type: 'number' },
      { field: 'gemSocketsMax', label: '最大宝石孔数量', type: 'number' }
    ]
  },
  {
    name: '潜力系统',
    properties: [
      { field: 'initialPotential', label: '初始潜力值', type: 'number' },
      { field: 'potentialGrowth', label: '潜力成长公式', type: 'textarea' }
    ]
  },
  {
    name: '锻造系统',
    properties: [
      { field: 'canForge', label: '是否可锻造', type: 'boolean' },
      { field: 'forgeNormalMax', label: '普通锻造最大次数', type: 'number' },
      { field: 'forgeNormalRate', label: '普通锻造成功率', type: 'array' },
      { field: 'canSacred', label: '是否可圣锻', type: 'boolean' },
      { field: 'forgeSacredMax', label: '圣锻最大次数', type: 'number' },
      { field: 'forgeSacredRate', label: '圣锻成功率', type: 'array' }
    ]
  },
  {
    name: '镶嵌系统',
    properties: [
      { field: 'maxPearls', label: '宝珠镶嵌最大数量', type: 'number' },
      { field: 'maxRunes', label: '符文镶嵌最大数量', type: 'number' },
      { field: 'maxEnchant', label: '附魔最大数量', type: 'number' }
    ]
  }
]);


// 监听传入参数的变化
watch(
  () => props.equipment,
  (newVal, oldVal) => {
    console.log('权限参数发生变化:', newVal, oldVal);
    if (newVal) {
    
    }
  }
);
</script>

<style scoped></style>
